<template>
    
</template>
 
<script>
export default {
    name: 'cardmove',
    props: {
        cardList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
           
        }
    },
    methods: {
        mousedown(index) { 
            this.upIndex = index;
            this.upTarget = event.target;
            this.start_x = event.clientX;
            this.start_left = parseInt(this.upTarget.style.left || 0);
        },

        mousemove() { 
            event.preventDefault();
            let x = event.clientX - this.start_x;
            let left = this.start_left;
            if (this.upTarget) { 
                this.upTarget.style.left = event.clientX + "px";
            }

            
           
        },
        mouseup(index) { 
            this.diaohuan(this.cardList, this.upIndex, index);
            console.log(event.target)
        },
        remove() {
            console.log('remove')
        },
        diaohuan(arr,index1,index2) { 
            return arr[index2] = arr.splice(index1,1,arr[index2])[0]
        }
    }
}
</script>
<style scoped>

.card {
    position: relative;
    background: burlywood;
    width: 100%;
    height: 50px;
    margin: 10px;
}
.card-dd{
    width: 40%;
}
.card-icon{
    text-align: right;
}
</style>